:root {
    --space-lg:32px;
    --space:20px;
    --space-md:10px;
    --space-sm:5px;
    --size-max:24px;
    --size-bd:18px;
    --size-lg:16px;
    --size:14px;
    --size-sm:12px;
    --size-ssm:10px;
    --radius:6px;
    --radius-lg:8px;
    --color:rgba(0,0,0,.75);
    --color-hover:#f5f5f5;
    --color-primary: rgb(22, 93, 255);
    --color-primary-hover:#40a9ff;
    --color-success:#52c41a;
    --color-success-hover:#73d13d;
    --color-warn:#faad14;
    --color-warn-hover:#ffc53d;
    --color-danger:#ff4d4f;
    --color-danger-hover:#ff7875;
    --color-gray:rgba(0,0,0,.45);
    --color-gray-hover:rgba(0,0,0,.35);
    --border-color:#f0f0f0;
    --border-radius:4px;
    --bg-color:#f0f2f5;
    --transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    padding-top: 6px;
    background-color: transparent;

}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .25);
}
/*width*/
.width-max {width: 100% !important;}
.width-lg {width: 320px !important;}
.width {width: 240px !important;}
.width-md {width: 200px !important;}
.width-mds {width: 180px !important;}
.width-sm {width: 120px !important;}
.width-xs {width: 80px !important;}
.container-min{ width: 800px!important;}
/*padding*/
.padding-none{padding: 0 !important;}
.padding{padding: var(--space) !important}
.padding-md{padding: var(--space-md) !important}
.padding-sm{padding: var(--space-sm) !important}
.padding-top{padding-top: var(--space)!important}
.padding-top-md{padding-top: var(--space-md)!important}
.padding-top-sm{padding-top: var(--space-sm)!important}
.padding-right{padding-right: var(--space)!important}
.padding-right-md{padding-right: var(--space-md)!important}
.padding-right-sm{padding-right: var(--space-sm)!important}
.padding-bottom{padding-bottom: var(--space)!important}
.padding-bottom-md{padding-bottom: var(--space-md)!important}
.padding-bottom-sm{padding-bottom: var(--space-sm)!important}
.padding-left{padding-left: var(--space)!important}
.padding-left-md{padding-left: var(--space-md)!important}
.padding-left-sm{padding-left: var(--space-sm)!important}
.padding-h-b{padding:0 20px 20px 20px}
/*margin*/
.margin-none{margin:0!important;}
.margin{margin: var(--space) !important}
.margin-md{margin: var(--space-md) !important}
.margin-sm{margin: var(--space-sm) !important}
.margin-top{margin-top: var(--space)!important}
.margin-top-md{margin-top: var(--space-md)!important}
.margin-top-sm{margin-top: var(--space-sm)!important}
.margin-right-lg{margin-right: var(--space-lg)!important}
.margin-right{margin-right: var(--space)!important}
.margin-right-md{margin-right: var(--space-md)!important}
.margin-right-sm{margin-right: var(--space-sm)!important}
.margin-bottom-lg{margin-bottom: var(--space-lg)!important}
.margin-bottom{margin-bottom: var(--space)!important}
.margin-bottom-md{margin-bottom: var(--space-md)!important}
.margin-bottom-sm{margin-bottom: var(--space-sm)!important}
.margin-left{margin-left: var(--space)!important}
.margin-left-md{margin-left: var(--space-md)!important}
.margin-left-sm{margin-left: var(--space-sm)!important}
/*border*/
.border{border:1px solid var(--border-color)}
.border-none{border:none !important}
.border-right{border-right:1px solid #f0f0f0 !important}
.border-left{border-left:1px solid #f0f0f0 !important}
.border-radius{border-radius: var(--radius)}
.border-radius-lg{border-radius: var(--radius-lg)}
/*flex*/
.flex{display: flex}
.flex-1{flex: 1}
.flex-inline{display: inline-flex}
.flex-between{display: flex; justify-content: space-between;align-items: center}
.flex-center{display: flex;justify-content: center;align-items: center;flex-direction: column}
.flex-items-center{display: flex;align-items: center}
.flex-end {display: flex;justify-content: flex-end}
/*font-size*/
.font-size-max{font-size: var(--size-max)}
.font-size-bd{font-size: var(--size-bd)}
.font-size-lg{font-size: var(--size-lg)}
.font-size{font-size: var(--size)}
.font-size-sm{font-size: var(--size-sm)}
.font-size-ssm{font-size: var(--size-ssm) !important;}
.font-weight-bold {font-weight: bold}
/*font color*/
.color,.hover,.hover-danger{color:var(--color)}
.color:hover{color:var(--color-hover)}
.color-gray{color:var(--color-gray)}
.color-primary{color:var(--color-primary)}
.color-primary:hover{color:var(--color-primary-hover)}
.color-success{color: var(--color-success)}
.color-success:hover{color: var(--color-success-hover)}
.color-warn{color:var(--color-warn)}
.color-warn:hover{color:var(--color-warn-hover)}
.color-danger{color:var(--color-danger)}
.color-danger:hover{color:var(--color-danger-hover)}
.hover-danger:hover{color:var(--color-danger-hover);cursor: pointer;}
.hover:hover{cursor: pointer;color:var(--color-primary);transition: var(--transition)}
.avatar-primary {background-color: var(--color-primary)}
/*align*/
.align-left{text-align: left}
.align-center{text-align: center}
.align-right{text-align: right}
.input-bg {
    background: #fafafa;
}
.fitter-button {
     cursor: pointer;
     font-size: 14px;
     height: 32px;
     padding: 4px 12px;
     border-radius: 6px;
     display: inline-block;
     background-color: #fafafa;
 }
.fitter-button:hover {
    background-color: #f5f5f5;
}
.table-action{
    display: flex;
    cursor: pointer;
    color: var(--color-primary);
    gap: 16px;
}
.table-action>span{
    position: relative;
}
.table-action>span:hover{
    color: var(--color-primary-hover);
    transition: var(--transition);
}
.table-action>span+span:before{
    content:"";
    top: 3px;
    height: 1em;
    left: -4px;
    display: inline-block;
    position: relative;
    border-inline-start: 1px solid rgba(5, 5, 5, 0.06);
    padding-left: var(--space-sm);
}
.table-action .anticon{
    margin-right: var(--space-sm);
}
.action-item {
    cursor: pointer;
    color: var(--color);
}
.action-item:hover{
    color: var(--color-primary-hover);
    transition: var(--transition);
}
.card-header {
    margin-bottom: var(--space);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header-title {
    font-size: 20px;
    font-weight: bold;
}
.btn-space-compact {
    padding-left: 8px;
    padding-right: 8px;
}
.price{
    font-weight: 500;
    color: var(--color);
    font-size: var(--size-lg);
}
.price:before{
    content:"￥";
    font-size: 12px;
}